<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <script src="js/jquery/jquery-3.4.1.min.js"></script>
</head>
<body>

<style>
    body{
        background-color: steelblue;;
    }
    .hole-div{
        width:500px;
        margin: 10% auto;
        border: 1px solid red;
        font-size: 14px;
    }

    .forms-group {
        margin-top: 15px;
        display: block;
    }

    .label-group{
        position: relative;
        display: inline-block;
        width:120px;
        text-align:right;
    }

    .input-content{
        height: 30px;
        padding: 3px;
        width: 200px;
        border: 1px solid gray;
        text-shadow: gray;
        border-radius: 3px;
        vertical-align: middle;
    }

    .input-content:focus{
        background-color: pink;
    }


    .butt{
        width: 3cm;
        height: 30px;
        border: 1px solid black;
        border-radius: 6px;
        display: block;
        margin-left: 80px;
        cursor: pointer;
    }

</style>

<div class="hole-div">
    <form th:action="@{/change_password}" th:method="post" th:object="${user}" id="changePswForm">
        <div class="forms-group">
            <label for="userName" class="label-group">用户名： </label>
            <input type="text" class="input-content" th:field="*{userName}" required="required" name="userName" autofocus="autofocus" id="userName">
        </div>

        <div class="forms-group">
            <label for="password" class="label-group">新密码：</label>
            <input type="password" name="password" th:field="*{password}" placeholder="6-16位密码,至少包含数字和字母" required="required" id="password" class="input-content">
            <span id="span3" style="color: red"></span>
        </div>

        <div class="forms-group">
            <label for="password2" class="label-group">再次输入密码：</label>
            <input type="password" name="title"  placeholder="请与新密码保持一致" required="required" id="password2" class="input-content">
            <span id="span4" style="color: red"></span>
        </div>

        <div class="forms-group">
            <label for="code" class="label-group">验证码：</label>
            <input type="text" name="stu2Name" id="code" class="input-content" required="required">
        </div>

        <br>
        <div style="display: flex">
            <input  type="button" value="发送验证码" class="butt" id="sendCode">
            <input  type="button" value="确认修改" class="butt" id="changePswBut">
            <a href="/login" style="margin-left: 5%">去登录</a>
        </div>
        <br>
    </form>
</div>
</body>
<script>
    $(function () {
        $('#changePswBut').click(function () {
            var code = $('#code').val()
            var name = $('#userName').val()
            var span3 = document.getElementById('span3')
            var span = document.getElementById('span4')
            if (span3.style.color == "green" && span.style.color == "green") {
                $.ajax({
                    type: "POST",
                    url: "/check_code_by_name",
                    data: {
                        code: code,
                        name: name
                    },
                    success: function (res) {
                        if (res["res"] == 200) {
                            document.getElementById('changePswForm').submit()
                        } else {
                            alert("验证码错误")
                        }
                    }
                })
            }else{
                alert("请输入正确信息")
            }
        })

        $('#sendCode').click(function () {
            var name = $('#userName').val()
            $.ajax({
                type: "POST",
                url: "/send_code_to_change_psw",
                data: {
                    name:name,
                },
                success:function (res) {
                    if (res["res"]==200){
                        alert("验证码已发送到您的邮箱")
                    }else{
                        alert("用户不存在")
                    }
                }
            })
        })

        $('#password').focusout(function () {
            var psw = $('#password').val();
            var span = document.getElementById('span3')
            var reg = /^(?=.*[a-zA-Z])(?=.*\d).{6,16}$/
            if (psw == null || psw==""){
                span.style.color='red'
                span.innerText="请输入密码"
            }else if (reg.exec(psw)){
                span.style.color='green'
                span.innerText=""
            }else{
                span.style.color='red'
                span.innerText="格式错误"
            }
        })

        $('#password2').focusout(function () {
            var pswOne = $('#password').val();
            var pswTwo = $('#password2').val();
            var span = document.getElementById('span4')
            if (pswOne!=pswTwo){
                span.style.color='red';
                span.innerText="两次密码不一致"
            }else{
                span.style.color='green';
                span.innerText=""
            }
        })
    })
</script>
</html>